<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>用户登录-会员中心</title>

    <script src="/static/jquery-1.9.1.min.js"></script>
    <script src="/static/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/static/bootstrap.min.css">

    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/css/verify.css">

    <!--引入JS-->
    <script type="text/javascript" src="/static/js/verify.js"></script>


</head>
<body>
<div class="row" style='margin-top:300px;'>
    <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">
        <b style='font-size:110px;margin-left: 0px;'>卡西欧官网</b>
        <h1>
            <a style='font-size:30px;' href="{:url('index/Index/email')}"> 邮箱注册
                &nbsp; </a>
            <span style='font-size:70px;'>登录界面</span> &nbsp;
            <a style='font-size:30px;' href="{:url('index/Index/register')}">手机注册 </a>
        </h1>
    </div>
</div>
<div class="row " style='margin:0 auto;'>
    <div class="col-xs-8 col-md-4 col-md-offset-4 col-xs-offset-2">

        <form action="{:url('index/Index/dologin')}" method='post'>
            <input type="hidden" name="__token__" value="{$token}"/>

            <div class="form-group " onsubmit="return false">
                <label for="exampleInputName" style='font-size:40px;margin-top:50px;'>用户名:</label>
                <input type="text" style='height:100px;font-size:40px;' required id='name' name="name"
                       class="form-control" id="exampleInputName" placeholder="手机或邮箱">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1" style='font-size:40px;margin-top:50px;'>密码:</label>
                <input maxlength="32" style='height:100px;font-size:40px;' required
                       onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')" type="password" name="password"
                       class="form-control" id="exampleInputPassword1"
                       placeholder="密码长度为6-32位">
            </div>

            <div id="mpanel1" style=" font-size:40px;margin-top:70px;"><!-- 滑动验证 --></div>


            <div class="input-group " style='margin-top: 40px; font-size:40px;  '>

                <button type="submit" id='btn' disabled='disabled'
                        style='font-size:40px;width:600px;height:100px;margin-top: 20px;' class="btn btn-default">登录
                </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <td>

                    <a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101782385&redirect_uri=http://www.xukai1998.top/mycb
                     ">
                        <img   style='width:200px;margin-top: 40px; margin-left: -110px;'
                         src="http://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png">
                    </a>
                </td>
            </div>

        </form>
    </div>
</div>
</div>
<script>
    // 滑动验证
    //这里的初始化是滑动&拼图的标志slideVerify
    $('#mpanel1').slideVerify({
        //滑动验证码type=1，拼图验证码type=2
        type: 1,

        //验证成功以后的回调
        success: function () {
            alert('验证匹配！');
            aa();

        }

    });

    function aa() {
        $('#btn').attr('disabled', false);
    }

    $('#yz').click(function yz() {

        var mobile = $("input[name='mobile']").val();

        $.ajax({
            method: 'post',
            url: "{:url('index/index/send')}",
            dataType: 'json',
            data: {
                "mobile": mobile,
            },
            success: function (data) {
                console.log(data);
                if (data > 0) {
                    alert('发送成功');

                } else {
                    alert('发送失败');
                }

            },
            error: function () {
                alert('ajax执行失败');
            }
        });
    })

    function name() {
        var name = $("input[name='name']").val();

        var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if (!reg.test(name)) {
            alert("邮箱格式不对");
            return false;
        }
    }



</script>


</body>
</html>